<!DOCTYPE html>
<meta charset="utf-8">
<title>Bar Chart Race</title>
<style>

:root {
  --sans-serif: sans-serif;
}

body {
  max-width: 960px;
  margin: 1em auto;
  font-family: var(--sans-serif);
}

a:link:not(:hover) {
  text-decoration: none;
}

</style>
<h1><a href="https://github.com/observablehq/examples">Observable Example</a>: <a href="https://github.com/observablehq/examples/tree/main/standalone">Standalone</a></h1>
<p>This example demonstrates a standalone Observable notebook with no external dependencies.</p>
<h2>The most populous cities in the world, 1575–2020</h2>
<div name="viewof replay"></div>
<div name="chart"></div>
<p>Credit: <a href="https://observablehq.com/@d3/bar-chart-race">Mike Bostock</a> · Data: <a href="https://gist.githubusercontent.com/johnburnmurdoch/4199dbe55095c3e13de8d5b2e5e5307a">John Burn–Murdoch</a></p>
<script src="d3.js"></script>
<script type="module">

import {Runtime, Library, Inspector} from "./runtime.js";
import notebook from "./bar-chart-race/index.js";

// Initialize the Observable Runtime, telling it to use our local copy of D3
// rather than loading one from a CDN.
const runtime = new Runtime(new Library(name => {
  switch (name) {
    case "d3@6": return d3;
  }
}));

// Show the output of the “chart” and “viewof replay” cells in the DIV elements
// with the corresponding name.
const main = runtime.module(notebook, name => {
  if (["chart", "viewof replay"].includes(name)) {
    return new Inspector(document.querySelector(`[name='${name}']`));
  }
});

// Redefine the “data” cell to use our CSV file (in the same format).
main.redefine("data", d3.csv("./cities.csv", d3.autoType));

// Redefine the “k” cell to disable tweening between keyframes. (This dataset is
// already interpolated.)
main.redefine("k", 1);

</script>
